﻿@{
    WebSecurity.RequireAuthenticatedUser();
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Users Management";
    
    if ( !Roles.IsUserInRole("admin")) {
       Response.Redirect("~/AdminError");
    }
    
    var roles = AccountManager.GetRoles();
    var users = AccountManager.GetUsers();
    
}
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both;}
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
.space{margin:1em}
</style>
<script>
    $(function(){
         toggleFields(false);
         initDialog();
      
    
        $("#adminType").change(function(){
            displayAdminParams();
            
        });
        
        $("#addUserBtn").click(function(){
            addUser();
        });
        
        $("#removeUserBtn").click(function(){
            sendRequest("removeuser");
        });
        
        
        $("#addRoleBtn").click(function(){
            addRole();
        });
        
         $("#removeRoleBtn").click(function(){
              sendRequest("removerole");
        });
       
        
         $("#addUser2RoleBtn").click(function(){
            addRoleMember();
        });
        
        
         $("#user").change(function(){
            $("#uroles").empty();
            sendRequest("geturoles");
            
            //loadGrid("geturoles");
        });
        
        $("#removeUserFromRoleBtn").click(function(){
            removeRoleMember();
        });
        
        $("#rls").change(function(){
           clearDisplayArea();
            getRoleMembers();
            
        });
        
        $("#removeRoleMembersBtn").click(function(){
            removeRoleMembers();
            
        });
        
        
    });
    
function initDialog(){
    //-----------save dialog box
     $("#message").dialog({
         autoOpen:false,
         modal:true,
         buttons:{
             "Ok":function(){
                     //get all the fields to be submitted
                     //$("#custForm").submit();
                    $(this).dialog("close");
                   }
             
        }
       
        });
}    

function showDialog(message){
    $("#message").html("<p>"+ message +"</p>");
    $("#message").dialog("open");
}
function toggleFields(f){
   toggleManageUsers(f);
   toggleManageRoles(f);
   toggleManageUserRoles(f);
   toggleManageRoleMembers(f);
   toggleUsersList(f);
   toggleRoleList(f);
}    

function toggleManageUsers(flag){
    $("#addUserDiv").toggle(flag);
    $("#addUserBtn").toggle(flag);
    $("#removeUserBtn").toggle(flag);
  
}

function toggleManageRoles(flag){
    $("#addRoleDiv").toggle(flag);
    $("#addRoleBtn").toggle(flag);
    $("#removeRoleBtn").toggle(flag);
   
    
}

function toggleManageUserRoles(flag){
     $("#addUsertoRoleDiv").toggle(flag);
     $("#addUser2RoleBtn").toggle(flag);
     $("#removeUserFromRoleBtn").toggle(flag);
     $("#uroles").toggle(flag);
}

function toggleManageRoleMembers(flag){
    $("#removeRoleMembersBtn").toggle(flag);
}

function toggleUsersList(flag){
     $("#usersDiv").toggle(flag);  
}

function toggleRoleList(flag){
    $("#rolesDiv").toggle(flag);  
}
    
function loadGrid(action){
    var params = $("#adminForm").serialize();
    
    $("#grid").empty();
    $("#grid").load("/Admin/AdminGrid",params);
}    

function clearGrid(){
     $("#grid").empty();
}

function displayAdminParams(){
    $("#searchParams").empty();
    var sp= $("#adminParams");
    var type = $("#adminType").val();
    switch(parseInt(type)){
        case 1:
          toggleManageUsers(true);
          toggleUsersList(true);
          toggleRoleList(false);
          toggleManageRoles(false);
          toggleManageUserRoles(false);
          toggleManageRoleMembers(false);
          clearLogin();
          sendRequest("getusers");
        break;
        case 2:
          toggleManageUsers(false);
          toggleUsersList(false);
          toggleRoleList(true);
          toggleManageRoles(true);
          toggleManageUserRoles(false);
          toggleManageRoleMembers(false);
          sendRequest("getroles");
         
        break;
        case 3:
          toggleUsersList(true);
          toggleRoleList(true);
          toggleManageUsers(false);
          toggleManageRoles(false);
          toggleManageUserRoles(true);
          toggleManageRoleMembers(false);
          clearGrid();
          sendRequest("getroles");
        break;
        case 4:
          toggleManageUsers(false);
          toggleManageRoles(false);
          toggleManageUserRoles(false);
          toggleManageRoleMembers(true);
          clearDisplayArea();
          clearGrid();
        break;
    
    }
}

function sendRequest(request){
    var params = $("#adminForm").serialize();
     var dummy = new Date().getTime();
     $.get("/Admin/Services/AdminService/"+request+"?date="+dummy,params,
        function(data){
          if(data[0]==true){
            //check type of request
            if(request=="getusers"){
                 updateUsersList(data[1]);
            }
            
            if(request=="getroles"){
                 updateRoleList(data[1]);
            }
            
            
            if(request=="adduser"){
                //update users dropdown to reflect new user
               showDialog("User was successfully added");
               updateUsersList(data[1]);
            }
            
            if(request=="removeuser"){
                showDialog("User(s) was successfully removed");
                $('#uroles').empty();
                updateUsersList(data[1]);
                
            }
            
            if(request=="addrole"){
                showDialog("Role was successfully added");
                updateRoleList(data[1]);
               
            }
            
            if(request=="geturoles"){
                //update user role list
                updateUserRoles(data[1]);
            }
            
            if(request=="addrm"){
                showDialog("Role was added to user");
                updateUserRoles(data[1]);
            }
            
            if(request=="removerole"){
                showDialog("Role was successfully removed");
                updateRoleList(data[1]);
               
            }
            
            
            
            if(request=="removeurm"){
                showDialog("User was successfully removed from role(s)");
                updateUserRoles(data[1]);
            }
            
            if(request=="getrmembers"){
                
                updateRoleMembers(data[1]);
            }
            if(request=="rm"){
                showDialog("User(s) were successfully removed from the role");
                getRoleMembers();
            }
            
            
        }else{
             if(request=="removerole"){
                showDialog("Role still has members, kindly remove the members first before deleting this role");
               
            }
        }
        
        
    },"json");
    
    
    /* $.ajax({
            url:"/Customer/Services/CustomerService/search",
            async:false,
            cache:false,
            dataType:'json',
            data:params,
            success: function(data){
                var results=data[0];
                if(results>=1){
                    $("#message").html("<p class='message error'>Customer may have duplicates</p>");
                    $("#hasDup").val(1);
                }else{
                    $("#message").empty();
                        $("#hasDup").val(0);
                    }
                 loadGrid();   
            }
            
         });*/
}

function updateUsersList(data){
        var refData = data;
         $('#user').empty();
        $.each(refData, function() {
        var options='<option>Choose User</option>';  
        for (var i = 0; i < refData.length; i++) {
                options+='<option value="' + refData[i].UserId + '">' + refData[i].Email + '</option>';
            }
           
            $('#user').html(options);
            
        });
}

function updateRoleList(data){
        var refData = data;
        $.each(refData, function() {
        var chkboxes='';  
        var options='<option>Choose Role</option>';  ;
        for (var i = 0; i < refData.length; i++) {
               options+='<option value="' + refData[i].RoleId + '">' + refData[i].RoleName + '</option>';
            }
           $('#roles').empty();
           $('#roles').html(options);
        }); 
}

function updateUserRoles(data){
     var user = $("#user option:selected").text();
     $('#uroles').empty();
     var refData = data;
        $.each(refData, function() {
        var chkboxes='';  
        var displayArea="<fieldset><legend>"+ user +" roles</legend>";
        for (var i = 0; i < refData.length; i++) {
               displayArea+='<label for="' + refData[i].RoleId + '">' + refData[i].RoleName + '</label><br/>';
            }
         
           $('#uroles').html(displayArea);
        }); 
}

function updateRoleMembers(data){
    var refData = data;
    $.each(refData, function() {
    var displayArea="<fieldset><legend>Role Members</legend>";
    for (var i = 0; i < refData.length; i++) {
            displayArea+='<input type="checkbox" name="members" id="members" value="' + refData[i].UserId + '">' + refData[i].Email + '</input><br/>';
        }
        $('#uroles').empty();
        $('#uroles').html(displayArea);
    }); 
}

function getRoleMembers(){
    sendRequest("getrmembers");
}

function addUser(){
    sendRequest("adduser");
}

function removeUser(){
    sendRequest("removeuser");
}

function addRole(){
    sendRequest("addrole");
    
}

function removeRole(){
    sendRequest("removerole");
}

function addRoleMember(){
    sendRequest("addrm");
    
}



function removeRoleMember(){
    sendRequest("removeurm");
    
}

function getUserRoles(){
    
    sendRequest("geturoles");
}

function removeRoleMembers(){
    sendRequest("rm");
}

function clearDisplayArea(){
    $('#displayArea').empty();
}

function clearLogin(){
    $("#uname").val("");
    $("#pass").val("");
    
}
</script>
<form id="adminForm" name="adminForm">
<div id="message" title="Users Management"></div>

  <fieldset class="ui-widget ui-widget-content">
<legend>Administration</legend>
<div>
  <p><label for="adminType">Admin Type:</label></p>
  <p>  
  <select name="adminType" id="adminType">
    <option value="0">Choose Admin function</option>
    <option value="1">Manage Users</option>
    <option value="2">Manage Roles</option>
    <option value="3">Manage User Roles</option>
    <!--<option value="4">Manage Role Members</option>-->
</select>
 </p>   
</div>  
 
 
<div id="addUserDiv">
    <p><label for="userName">User Name:</label></p>
    <p>   <input type="text" name="uname" id="uname"/> </p>
    <p><label for="pass">Password:</label></p>
    <p><input type="password" name="pass" id="pass"/> </p>
    
</div>    

    
<div id="addRoleDiv">
      <p><label for="role">Role Name:</label></p>
       <p><input type="text" name="role" id="role"/>  </p>
</div>    
    
 

<div id="usersDiv" style="float:left" class="space">
    <p><label for="user">Users:</label></p>
  <p><select name="user" id="user" multiple="multiple" size="10">
    <option>Choose User</option>
    @foreach(var user in users){
        <option value="@user.UserId">@user.Email</option>
    }
</select>      
</p>        
</div> 
  
<div id="rolesDiv" style="float:left" class="space">
    <p><label for="rls">Roles:</label></p>
    <p> <select name="roles" id="roles" multiple="multiple" size="5">
        <option>Choose Role</option>
        @foreach(var role in roles){
            <option value="@role.RoleId">@role.RoleName</option>
        } 
    </select> 
        </p>
 </div>     
<div id="uroles" style="float:left" class="space"></div>         
 
<div id="roleMembersDiv" style="float:left" class="space"></div>
<div id="grid" >
    
</div>

<div id="buttons" style="clear:both" class="space">
        <input type="button" id="addUserBtn" value="Add User"/>
        <input type="button" id="removeUserBtn" value="Remove User"/>
    
        <input type="button" id="addRoleBtn" value="Add Role"/>
        <input type="button" id="removeRoleBtn" value="Remove Role"/>
    
       
        <input type="button" id="addUser2RoleBtn" value="Add User to Role(s)"/>
        <input type="button" id="removeUserFromRoleBtn" value="Remove User from Role"/>
    
        <input type="button" id="removeRoleMembersBtn" value="Remove Role Member(s)"/>
    
         
    </div> 
   
 </fieldset>
 </form>


